<template>
  <div class="ai-analyze-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h3>社保数据AI分析</h3>
        </div>
      </template>

      <el-form :model="formData" label-width="120px">
        <el-form-item label="数据类型">
          <el-select v-model="formData.dataType" placeholder="请选择数据类型">
            <el-option label="参保人数据" value="insured" />
            <el-option label="缴费数据" value="payment" />
            <el-option label="待遇数据" value="benefit" />
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker v-model="formData.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD"
            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]" />
        </el-form-item>

        <el-form-item label="分析维度">
          <el-checkbox-group v-model="formData.dimensions">
            <el-checkbox label="age" size="large">年龄分布</el-checkbox>
            <el-checkbox label="gender" size="large">性别比例</el-checkbox>
            <el-checkbox label="region" size="large">地区分布</el-checkbox>
            <!-- Add more dimensions if needed -->
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="startAnalysis" :loading="analyzing">
            开始分析
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 加载提示 -->
    <el-card v-if="analyzing" class="loading-card">
      正在分析中，请稍候...
      <el-progress :percentage="100" :indeterminate="true" :duration="1" />
    </el-card>

    <div v-if="showResults && !analyzing" class="results-container">
      <!-- 分析摘要 -->
      <el-card class="summary-card" v-if="analysisSummary">
        <template #header>
          <div class="card-header">
            <h3>分析摘要</h3>
          </div>
        </template>
        <div class="summary-content">
          <el-alert type="info" :closable="false" show-icon :title="summaryTitle">
            <!-- 使用 <pre> 标签保留换行和空格 -->
            <pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit;">{{ analysisSummary
            }}</pre>
          </el-alert>
        </div>
      </el-card>

      <!-- 图表展示区域 -->
      <el-row :gutter="20" v-if="hasChartData()">
        <!-- 年龄分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" v-if="formData.dimensions.includes('age')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>年龄分布</h3>
              </div>
            </template>
            <div ref="ageChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 性别比例 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" v-if="formData.dimensions.includes('gender')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>性别比例</h3>
              </div>
            </template>
            <div ref="genderChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 地区分布 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="8" v-if="formData.dimensions.includes('region')">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>地区分布</h3>
              </div>
            </template>
            <div ref="regionChartRef" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 时间序列数据 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>时间序列分析</h3>
              </div>
            </template>
            <div ref="timeSeriesChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 政策指标 -->
      <el-card class="metrics-card" v-if="policyMetrics">
        <template #header>
          <div class="card-header">
            <h3>政策指标</h3>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :xs="12" :sm="12" :md="12" :lg="12">
            <el-statistic title="覆盖率 (%)" :value="policyMetrics.coverage_rate ?? 0" :precision="2" />
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12">
            <el-statistic title="新增参保人数" :value="policyMetrics.new_registrations ?? 0" />
          </el-col>
          <!-- Add more metrics if needed -->
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, onUnmounted, nextTick, Ref, watch} from 'vue'; // 确保导入了 Ref 类型
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

// --- 类型定义 --- (保持不变，或者可以简化，因为不再有SSE中间状态)
interface PolicyMetrics {
  coverage_rate?: number;
  new_registrations?: number;
}

interface AnalysisData { // 直接定义分析结果的数据结构
  summary?: string;
  demographics?: {
    age_distribution?: Record<string, number>;
    gender_ratio?: Record<string, number>;
    region_distribution?: Record<string, number>;
  };
  time_series?: {
    dates?: string[];
    actual_values?: number[];
    predictions?: number[];
  };
  policy_metrics?: PolicyMetrics;
}

interface BackendResponse { // 后端返回的顶层结构
  analysis_result: AnalysisData;
}


// --- Reactive State ---
const formData = reactive({
  dataType: '',
  dateRange: [] as string[],
  dimensions: ['age', 'gender', 'region'] as string[], // 默认勾选所有维度以便显示
});

const analyzing = ref(false);
const showResults = ref(false); // 控制整个结果区域的显示
const analysisSummary = ref<string>('');
const summaryTitle = ref<string>('分析摘要'); // 用于显示摘要或错误信息标题
const policyMetrics = ref<PolicyMetrics | null>(null);
// 用于判断是否有图表数据，避免在无数据时渲染空的图表区域
const chartData = ref<AnalysisData | null>(null);

// --- Chart Refs and Instances ---
const ageChartRef = ref<HTMLElement | null>(null);
const genderChartRef = ref<HTMLElement | null>(null);
const regionChartRef = ref<HTMLElement | null>(null);
const timeSeriesChartRef = ref<HTMLElement | null>(null);

let ageChart: echarts.ECharts | null = null;
let genderChart: echarts.ECharts | null = null;
let regionChart: echarts.ECharts | null = null;
let timeSeriesChart: echarts.ECharts | null = null;

// --- Helper Functions ---

// 清理字符串（可选，但保留可能更健壮，以防后端返回带干扰字符的串）
const cleanString = (input: string): string => {
  if (!input) return '';
  let cleaned = input;
  cleaned = cleaned.replace(/`/g, ''); // 移除反引号
  cleaned = cleaned.replace(/^```(?:json)?\s*/i, ''); // 移除开头的 Markdown 代码块标记
  cleaned = cleaned.replace(/\s*```$/, ''); // 移除结尾的 Markdown 代码块标记
  cleaned = cleaned.replace(/^\s*json\s*\n(?=\{)/i, ''); // 处理 "json\n{" 前缀
  cleaned = cleaned.trim(); // 去除首尾空白
  return cleaned;
};

// --- Chart Logic --- (基本保持不变)

const initChart = (vueRef: Ref<HTMLElement | null>, chartInstance: echarts.ECharts | null): echarts.ECharts | null => {
  // 内部逻辑保持不变，使用 vueRef.value 访问 DOM 元素
  const chartName = vueRef.value?.id || vueRef.value?.getAttribute('ref') || '未知图表';
  if (vueRef.value && !chartInstance) { // 使用 vueRef.value
    console.log(`[${chartName}] 尝试初始化 ECharts 实例...`);
    try {
      // 使用 vueRef.value 作为 echarts.init 的参数
      chartInstance = echarts.init(vueRef.value);
      console.log(`[${chartName}] 初始化成功，实例:`, chartInstance ? '有效' : '失败');
    } catch (e: any) { // 更具体的错误类型捕获
      console.error(`[${chartName}] 初始化图表失败:`, e);
      ElMessage.error(`图表 '${chartName}' 初始化失败: ${e.message}`);
      chartInstance = null; // 明确设置为 null
    }
  }
  else if (vueRef.value && chartInstance) { // 使用 vueRef.value
    // console.log(`[${chartName}] 实例已存在，尝试调整大小...`);
    try {
      chartInstance.resize();
    } catch (e: any) {
      console.error(`[${chartName}] 调整图表大小失败:`, e);
      try {
        chartInstance.dispose(); // 先销毁旧实例
        console.log(`[${chartName}] 调整大小错误后，尝试重新初始化...`);
        chartInstance = echarts.init(vueRef.value); // 重新初始化
        console.log(`[${chartName}] 重新初始化结果:`, chartInstance ? '有效' : '失败');
      } catch (e2: any) {
        console.error(`[${chartName}] 重新初始化图表失败:`, e2);
        chartInstance = null; // 彻底失败
      }
    }
  } else if (!vueRef.value) { // 使用 vueRef.value
    // console.warn(`[${chartName}] 图表初始化跳过：DOM 引用为空。`);
  }
  return chartInstance;
};


const clearAllCharts = () => {
  console.log("清空所有图表内容...");
  ageChart?.clear();
  genderChart?.clear();
  regionChart?.clear();
  timeSeriesChart?.clear();
}

const updateCharts = (resultData: AnalysisData | null) => {
  console.log("========= 进入 updateCharts 函数，传入数据: =========");
  console.log(JSON.stringify(resultData, null, 2));
  console.log("=================================================");
  if (!resultData) {
    console.warn('updateCharts 收到空数据，跳过更新。');
    chartData.value = null; // 标记无图表数据
    return;
  }
  console.log('使用数据更新图表:', JSON.stringify(resultData).substring(0, 300) + "...");
  chartData.value = resultData; // 标记有图表数据

  // 确保图表实例已初始化
  nextTick(() => { // 使用 nextTick 确保 DOM 元素已准备好
    // initializeAllCharts();

    // 1. 更新摘要 (如果数据中包含)
    if (resultData.summary) {
      analysisSummary.value = resultData.summary;
      summaryTitle.value = '分析摘要';
    } else {
      // 如果分析成功但没有摘要，可以给个默认提示
      if (analysisSummary.value === '正在请求分析结果...') {
        analysisSummary.value = '分析完成，但未提供摘要信息。';
        summaryTitle.value = '提示';
      }
    }

    // 2. 更新人口统计图表
    if (resultData.demographics) {
      console.log("尝试更新年龄图表...");
      console.log("ageChart 实例是否存在:", !!ageChart);
      console.log("ageChartRef.value 是否存在:", !!ageChartRef.value);
      console.log("维度是否包含 'age':", formData.dimensions.includes('age'));
      console.log("age_distribution 数据是否存在:", !!(resultData.demographics && resultData.demographics.age_distribution));
      const { age_distribution, gender_ratio, region_distribution } = resultData.demographics;

      // 年龄分布图 (饼图)
      if (ageChart && ageChartRef.value && formData.dimensions.includes('age') && age_distribution) {
        try {
          const ageData = Object.entries(age_distribution)
            .map(([name, value]) => ({ name, value: Number(value) || 0 }))
            .filter(item => item.value > 0); // 过滤掉值为0的项

          if (ageData.length > 0) {
            ageChart.setOption({
              tooltip: { trigger: 'item', formatter: '{b}: {c}人 ({d}%)' },
              legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20 },
              series: [{
                name: '年龄分布', type: 'pie', radius: ['40%', '70%'], center: ['45%', '50%'], // 调整中心以适应图例
                avoidLabelOverlap: true, itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 1 },
                label: { show: false, position: 'center' },
                emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
                labelLine: { show: false }, data: ageData,
              }],
            }, true);
          } else { ageChart.clear(); } // 如果没有有效数据则清空
        } catch (e) { console.error("更新年龄图表时出错:", e); ageChart.clear(); }
      } else if (ageChart) { ageChart.clear(); } // 如果不包含该维度或无数据，清空

      console.log("尝试更新性别图表...");
      console.log("genderChart 实例是否存在:", !!genderChart);
      console.log("维度是否包含 'gender':", formData.dimensions.includes('gender'));
      console.log("gender_ratio 数据是否存在:", !!gender_ratio);
      // 性别比例图 (饼图)
      if (genderChart && genderChartRef.value && formData.dimensions.includes('gender') && gender_ratio) {
        try {
          const genderData = Object.entries(gender_ratio)
            .map(([name, value]) => ({ name: name === 'male' ? '男性' : name === 'female' ? '女性' : name, value: Number(value) || 0 }))
            .filter(item => item.value > 0);

          if (genderData.length > 0) {
            genderChart.setOption({
              tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
              legend: { top: '5%', left: 'center' },
              series: [{
                name: '性别比例', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false,
                label: { show: false, position: 'center' },
                emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
                labelLine: { show: false }, data: genderData,
              }],
              color: ['#5470c6', '#ee6666', '#fac858', '#91cc75']
            }, true);
          } else { genderChart.clear(); }
        } catch (e) { console.error("更新性别图表时出错:", e); genderChart.clear(); }
      } else if (genderChart) { genderChart.clear(); }

      // 地区分布图 (柱状图)
      console.log("尝试更新地区图表...");
      console.log("regionChart 实例是否存在:", !!regionChart);
      console.log("维度是否包含 'region':", formData.dimensions.includes('region'));
      console.log("region_distribution 数据是否存在:", !!region_distribution);
      if (regionChart && regionChartRef.value && formData.dimensions.includes('region') && region_distribution) {
        try {
          const regionData = Object.entries(region_distribution);
          const regionNames = regionData.map(item => item[0]);
          const regionValues = regionData.map(item => Number(item[1]) || 0);

          if (regionNames.length > 0) {
            regionChart.setOption({
              tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
              grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
              xAxis: { type: 'value', boundaryGap: [0, 0.01] },
              yAxis: { type: 'category', data: regionNames },
              series: [{ name: '分布数量', type: 'bar', data: regionValues }]
            }, true);
          } else { regionChart.clear(); }
        } catch (e) { console.error("更新地区图表时出错:", e); regionChart.clear(); }
      } else if (regionChart) { regionChart.clear(); }
    } else {
      // 如果没有 demographics 数据，清空相关图表
      ageChart?.clear();
      genderChart?.clear();
      regionChart?.clear();
    }

    // 3. 更新时间序列图表
    if (chartData.value?.time_series) {
      const { dates = [], actual_values = [], predictions = [] } = chartData.value.time_series;
      console.log("尝试更新时间序列图表...");
      console.log("timeSeriesChart 实例是否存在:", !!timeSeriesChart);
      console.log("time_series 数据是否存在:", !!chartData.value.time_series);
      if (timeSeriesChart && dates && (actual_values || predictions)) { // 问题可能在这里的条件判断
        try {
          const seriesData = [];
          // 确保数据是数值类型
          const actualValuesNum = actual_values.map(v => Number(v)).filter(v => !isNaN(v));
          const predictionsNum = predictions.map(v => Number(v)).filter(v => !isNaN(v));

          if (actualValuesNum.length > 0) {
            // 注意这里的 name: '实际值'
            seriesData.push({ name: '实际值', type: 'line', smooth: true, data: actualValuesNum, itemStyle: { color: '#5470C6' } });
          }
          if (predictionsNum.length > 0) {
            // 注意这里的 name: '预测值'
            seriesData.push({ name: '预测值', type: 'line', smooth: true, lineStyle: { type: 'dashed' }, data: predictionsNum, itemStyle: { color: '#91CC75' } });
          }

          // 只有当 seriesData 数组非空时，才设置图例和 series
          if (seriesData.length > 0 && dates && dates.length > 0) {
            timeSeriesChart.setOption({
              tooltip: { trigger: 'axis' },
              // legend.data 是根据 seriesData 动态生成的
              legend: { data: seriesData.map(s => s.name) }, // 例如 ['实际值', '预测值']
              grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
              xAxis: { type: 'category', boundaryGap: false, data: dates },
              yAxis: { type: 'value' },
              // series 数组包含了实际要绘制的系列
              series: seriesData, // 这里的 name 必须和 legend.data 中的名称对应
            }, true);
            console.log("时间序列图表 setOption 调用完成。");
          } else {
            timeSeriesChart.clear();
            console.log("时间序列数据有效，但不足以生成系列 (seriesData 为空)，已清空图表。");
          }

        } catch(e) { console.error("更新时间序列图表时出错:", e); timeSeriesChart?.clear(); }
      } else if (timeSeriesChart) { // 如果实例存在但条件不满足（例如 dates 为空，或 actual_values 和 predictions 都为空）
        console.log("时间序列图表更新条件不满足（日期或数值缺失），清空。");
        timeSeriesChart.clear();
      } else { console.log("时间序列图表实例不存在。"); }
    } else if (timeSeriesChart) {
      console.log("无 time_series 数据，清空图表。");
      timeSeriesChart.clear();
    }

    // 4. 更新政策指标
    if (resultData.policy_metrics) {
      policyMetrics.value = resultData.policy_metrics;
    } else {
      policyMetrics.value = null;
    }
  }); // 结束 nextTick
};

watch(chartData, (newData) => {
  // 只有当有新数据时（从无到有，或数据更新）才需要考虑初始化或更新
  if (newData) {
    console.log("watch 检测到 chartData 变化，准备初始化/调整图表...");
    // 使用 nextTick 确保 v-if 渲染的 DOM 元素已经挂载
    nextTick(() => {
      console.log("nextTick 回调执行：尝试初始化所有图表实例...");
      initializeAllCharts(); // 在这里初始化或调整大小

      // 初始化后，立即用当前数据更新一次图表内容
      // 这一步很重要，因为 updateCharts 现在不负责初始化了
      // 需要确保初始化之后，图表能获得数据
      console.log("初始化后，再次调用 updateCharts 的 setOption 部分（通过模拟）...");
      // 注意：直接调用 updateCharts 可能导致逻辑重复或状态问题
      // 更好的方式是，让 updateCharts 只更新数据，由 watch 保证实例存在
      // 这里的 updateCharts 调用是为了确保数据被 setOption
      // 或者，将 setOption 逻辑也移到 nextTick 里？

      // 尝试方案：确保初始化后，让 updateCharts 更新内容
      // updateCharts 内部已经有 nextTick 包裹 setOption，应该还好
      updateCharts(newData); // 传入新数据再次触发更新流程（主要是 setOption）

    });
  } else {
    // 如果数据变为空 (例如分析失败或清除)，也应该清空图表
    console.log("watch 检测到 chartData 变为空，清空图表...");
    clearAllCharts();
  }
}, { immediate: false, deep: true }); // deep: true 可能需要，如果数据结构复杂且内部变化也需触发

// initializeAllCharts 只负责基于当前 ref 创建或调整实例
const initializeAllCharts = () => {
  console.log('执行 initializeAllCharts...');
  // 检查 DOM 元素是否存在，这是关键
  console.log("ageChartRef.value:", ageChartRef.value);
  console.log("genderChartRef.value:", genderChartRef.value);
  console.log("regionChartRef.value:", regionChartRef.value);
  console.log("timeSeriesChartRef.value:", timeSeriesChartRef.value);

  // 只有当 DOM 元素实际存在时才尝试初始化
  if (ageChartRef.value) ageChart = initChart(ageChartRef, ageChart);
  if (genderChartRef.value) genderChart = initChart(genderChartRef, genderChart);
  if (regionChartRef.value) regionChart = initChart(regionChartRef, regionChart);
  if (timeSeriesChartRef.value) timeSeriesChart = initChart(timeSeriesChartRef, timeSeriesChart);
};

// --- Analysis Control ---

const startAnalysis = async () => {
  // 1. 表单验证
  if (!formData.dataType || !formData.dateRange || formData.dateRange.length !== 2 || !formData.dimensions.length) {
    ElMessage.warning('请完整填写所有分析条件');
    return;
  }

  console.log('开始分析，参数:', formData);
  analyzing.value = true;
  showResults.value = true; // 立即显示结果区域框架
  analysisSummary.value = ''; // 清空旧摘要
  summaryTitle.value = '分析摘要'; // 重置标题
  policyMetrics.value = null; // 清空旧指标
  chartData.value = null; // 清空旧图表数据标记

  // 清空图表内容
  await nextTick(); // 等待 DOM 更新完成（如果 showResults 之前是 false）
  clearAllCharts();
  initializeAllCharts(); // 确保图表实例存在并适应容器大小


  // 2. 构造请求 URL
  const params = new URLSearchParams({
    dataType: formData.dataType,
    startDate: formData.dateRange[0],
    endDate: formData.dateRange[1],
    dimensions: formData.dimensions.join(','),
  });
  const apiUrl = `http://localhost:8090/api/ai/analyze/sync-social?${params}`;
  console.log("请求 URL:", apiUrl);

  // 3. 发起 Fetch 请求
  try {
    const response = await fetch(apiUrl);

    // 检查 HTTP 状态码
    if (!response.ok) {
      // 尝试读取错误响应体
      let errorBody = `HTTP 错误 ${response.status}: ${response.statusText}`;
      try {
        const errorText = await response.text();
        errorBody += `\n服务器响应: ${errorText}`;
      } catch (e) { /* 忽略读取错误体时的错误 */ }
      console.error('请求失败:', errorBody);
      throw new Error(`服务器请求失败 (状态码: ${response.status})`);
    }

    // 获取响应文本
    const responseText = await response.text();
    console.log("收到原始响应文本:", responseText.substring(0, 500) + (responseText.length > 500 ? '...' : ''));

    // (可选) 清理字符串
    const cleanedText = cleanString(responseText);
    if (!cleanedText) {
      throw new Error("服务器返回了空内容。");
    }

    // 4. 解析 JSON
    let parsedData: BackendResponse;
    try {
      parsedData = JSON.parse(cleanedText);
      console.log("成功解析 JSON:", parsedData);
      console.log("========= 完整解析后的 analysis_result 数据 =========");
      console.log(JSON.stringify(parsedData.analysis_result, null, 2)); // 打印格式化的 JSON 字符串
      console.log("=====================================================");
    } catch (parseError) {
      console.error('解析 JSON 失败:', parseError);
      console.error('解析失败的文本:', cleanedText);
      throw new Error('无法解析服务器返回的数据格式。');
    }

    // 5. 检查基本结构
    if (!parsedData || !parsedData.analysis_result) {
      throw new Error("服务器返回的数据缺少必要的 'analysis_result' 字段。");
    }

    // 6. 更新图表和摘要
    updateCharts(parsedData.analysis_result);
    ElMessage.success('分析完成！');

  } catch (error: any) {
    console.error('分析过程中发生错误:', error);
    analysisSummary.value = `分析失败：\n${error.message || '未知错误'}`; // 在摘要区显示错误信息
    summaryTitle.value = '错误'; // 更新标题为错误
    chartData.value = null; // 确保没有图表数据
    policyMetrics.value = null; // 清空指标
    ElMessage.error(`分析失败: ${error.message}`);
  } finally {
    // 7. 结束加载状态
    analyzing.value = false;
  }
};

// 辅助计算属性，判断是否有图表数据需要渲染
const hasChartData = () => {
  // 只要 chartData 不为 null 就认为有数据需要尝试渲染
  // updateCharts 内部会处理具体图表是否有数据并清空
  return !!chartData.value;
};


// --- Lifecycle Hooks ---

onMounted(() => {
  console.log('组件已挂载，初始化图表。');
  // 不需要立即初始化图表实例，可以在需要时（如 startAnalysis 或 updateCharts）进行
  // 但需要添加 resize 监听器
  const handleResize = () => {
    initializeAllCharts(); // 窗口变化时调整所有图表大小
  };
  window.addEventListener('resize', handleResize);

  onUnmounted(() => {
    console.log('组件将卸载，清理资源。');
    window.removeEventListener('resize', handleResize);
    // 销毁 ECharts 实例
    ageChart?.dispose();
    genderChart?.dispose();
    regionChart?.dispose();
    timeSeriesChart?.dispose();
    ageChart = genderChart = regionChart = timeSeriesChart = null;
  });
});

</script>

<style scoped>
.ai-analyze-container {
  padding: 20px;
  background-color: #f4f4f5;
}

.form-card,
.summary-card,
.chart-card,
.metrics-card,
.loading-card {
  /* 为 loading 添加样式 */
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  border-radius: 4px;
}

.loading-card {
  padding: 20px;
  text-align: center;
  color: #606266;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
  padding: 12px 20px;
  /* 稍微减小内边距 */
  background-color: #fafafa;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.el-form {
  padding: 20px 20px 0 20px;
}

.el-select,
.el-date-picker {
  width: 100%;
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.results-container {
  margin-top: 20px;
}

.summary-content {
  padding: 15px 20px;
  line-height: 1.6;
}

.summary-content .el-alert {
  background-color: #eef2ff;
  /* 自定义信息背景色 */
  padding: 10px 15px;
}

.summary-content .el-alert :deep(.el-alert__title) {
  /* 调整标题样式 */
  font-size: 14px;
  font-weight: bold;
}

.summary-content pre {
  font-size: 14px;
  /* 控制摘要内容字体大小 */
  color: #303133;
}


.chart-container {
  height: 350px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.metrics-card .el-row {
  padding: 20px;
}

.metrics-card .el-statistic {
  text-align: center;
  /* 指标居中显示 */
}

.metrics-card .el-statistic :deep(.el-statistic__head) {
  /* 使用 deep 选择器 */
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  /* 增加标题和数值间距 */
}

.metrics-card .el-statistic :deep(.el-statistic__content) {
  /* 使用 deep 选择器 */
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}


/* Responsive adjustments */
@media (max-width: 992px) {
  .chart-container {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }

  .el-form-item__label {
    width: 90px !important;
  }

  .el-form-item__content {
    margin-left: 90px !important;
  }

  .el-checkbox-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>
